<style type="text/css">
	.unit-item-container li.active {
		background: rgba(86, 94, 153, 1);
		color: #fff;
		border-color: rgba(86, 94, 153, 1);
	}
	.stwp-park-wrap {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.stwp-park {
		width: 600px;
		background-color: #fff;
	}

	.stwp-park .title {
		height: 45px;
		line-height: 45px;
		text-align: center;
	}

	.stwp-park .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		line-height: 45px;
	}

	.stwp-block {
		width: 45px;
		height: 58px;
		float: left;
		margin-top: 8px;
		margin-right: 3px;
	}

	.container-park {
		height: 260px;
		overflow-y: scroll;
	}

	.color-unit-box {
		position: absolute;
		right: 88px;
		top: 0;
	}

	.unit-color {
		margin-left: 10px;
		line-height: 34px;
	}

	.unit-color span {
		display: inline-block;
		width: 12px;
		height: 12px;
		vertical-align: middle;
		margin-top: -1px;
	}

	.yd {
		background-color: #76BDE5;
	}

	.cz {
		background-color: #44b549;
	}

	.ly {
		background-color: #f9b96b;
	}

	.dq {
		background-color: #e75776;
	}

	.fn {
		background-color: #AC101A;
	}

	.kz {
		background-color: #bfc0c1;
	}

	.zy {
		background-color: #c68b8b;
	}

	.wp {
		background: -webkit-linear-gradient(left, #a994ff, #648ae2);
		color: #fff;
	}

	.st {
		background: -webkit-linear-gradient(left, #ffc688, #ff7b99);
		color: #fff;
	}

	.child-unit-item .yd {
		color: #76BDE5;
	}

	.child-unit-item .cz,
	.stwp-block .ir {
		color: #44b549;
	}

	.child-unit-item .ly {
		color: #f9b96b;
	}

	.child-unit-item .dq,
	.stwp-block .dq {
		color: #e75776;
	}

	.child-unit-item .zy,
	.stwp-block .zy0 {
		color: #c68b8b;
	}

	.child-unit-item .kz {
		color: #bfc0c1;
	}

	.stwp-block .va {
		color: #999;
	}

	.unit-pop-wrap {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.unit-pop {
		width: 900px;
		background-color: #fff;
		position: relative;
	}

	.unit-pop .title {
		text-align: center;
		line-height: 45px;
	}

	.unit-pop .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}

	.unit-pop-container {
		overflow-y: scroll;
		height: 350px;
	}

	.checkall-build {
		width: 14px;
		height: 14px;
		border: 1px solid #ddd;
		border-radius: 2px;
		display: inline-block;
		transform: translate(0, 2px);
	}

	.radio-build {
		width: 14px;
		height: 14px;
		border: 1px solid #ddd;
		border-radius: 14px;
		display: inline-block;
		transform: translate(0, 2px);
	}

	.unit-block {
		width: 164px;
		min-height: 50px;
		position: relative;
		box-shadow: 0 0 3px rgba(0, 0, 0, .2);
		border-radius: 4px;
		margin-right: 4px;
		margin-bottom: 4px;
	}

	.unit-block.splitUnitBlock {
		width: 670px;
	}

	.unit-block-item {
		width: 164px;
		height: 50px;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.parking-icon {
		right: 7px;
		bottom: 5px;
		width: 22px;
		height: 22px;
		background: #fff;
		border-radius: 50%;
		line-height: 22px;
		text-align: center;
		color: rgba(0, 0, 0, .4);
	}

	.add-split-unit-container {
		padding: 12px 20px 2px;
		background-color: #FCFCFF;
		border: 1px dashed #959DDD;
		border-radius: 4px;
		margin-top: 12px;
	}

	.split-unit-container {
		padding: 12px 20px 2px;
		background-color: #FCFCFF;
		border: 1px dashed #959DDD;
		border-radius: 4px;
		margin-top: 12px;
	}

	.child-unit-wrap {
		display: flex;
		margin: 0 40px 3px 6px;
		flex-flow: row wrap;
		overflow: hidden;
	}

	.child-unit-item {
		position: relative;
		flex: 1;
		height: 44px;
		border: 2px dotted #fff;
		margin: 0 10px 0 0;
		padding: 5px;
		text-align: left;
	}

	.child-unit-item .intro,
	.child-unit-item .name {
		overflow: hidden;
		height: 18px;
		line-height: 18px;
		color: #fff;
	}

	.child-unit-item .rent-state {
		position: absolute;
		height: 18px;
		line-height: 14px;
		right: 3px;
		bottom: 3px;
		background-color: #fff;
		padding: 2px;
		border-radius: 3px;
	}

	.split-unit-block-item p {
		color: #fff;
		padding: 0 0 0 12px;
		line-height: 28px;
	}

	.rent-sale-state {
		position: absolute;
		right: -21px;
		top: -3px;
		width: 70px;
		font-size: 10px;
		font-weight: 400;
		line-height: 34px;
		padding: 0 0 5px 0;
		background-image: url(assets/images/rentsale.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		text-align: center;
		transform: rotate(45deg);
		color: #fff;
	}

	.irRentState {
		color: #44B548;
	}

	.vaRentState {
		color: #CFD0D1;
	}

	.ipRentState {
		color: #F9B96B;
	}

	.duRentState {
		color: #E4607D;
	}

	.zyRentState {
		color: #C68B8B;
	}

	.dyRentState {
		color: #76BDE5;
	}

	.error-style {
		border: 1px solid #f00;
	}
	.linebottom{
		width: 100%;
		height: 10px;
		margin-top: 7px;
		background-color: #eee;
	}
	.mywidth{
		width: 120px;
	}
	.mywidth1{
		width: 130px;
	}
	.mywidth2{
		width: 145px;
	}
	.mywidth2{
		width: 145px;
	}
	.tupian3{
		vertical-align: top;
		margin-top: 2px;
		cursor: pointer;
	}
	.pl-36{
		padding-left: 36px;
	}
	.disabledClick{
		background-color: #ccc;
	}
	.mr-20{
		margin-right: 20px;
	}
	.ml-15{
		margin-left: 15px;
	}
	.ml-30{
		margin-left: 30px;
	}
	.ml-5{
		margin-left: 5px;
	}
	.mr-12{
		margin-right: 12px;
	}
</style>

<section id="unit">
	<ul class="unit-item-container pb-10 dy-flex" style="flex-wrap: wrap;">
		<li class="border line-height-34 text-center br-4 color-999 cursor ellipsis-1"
			:class="{'n-btn-primary': buildingId == item.buildingId}" @click="selBuilding(item)"
			style="width: 110px; height: 34px; line-height: 34px;" :title="item.name"
			v-for="(item, index) in buildingList">
			{{ item.name || '未知楼宇' }}</li>
	</ul>
	<div class="dy-flex ptb-10 bg-f7f7f7 pl-24 pr-24" style="justify-content: space-between;">
		<div class="font-14 color-666 line-height-34">配置方式:</div>
		<div>
			<hl-button @on-click="stConfig">车位配置</hl-button>
			<hl-button @on-click="wpConfig">工位配置</hl-button>
			<hl-button @on-click="showUnitFloorConfig">单元配置</hl-button>
		</div>
	</div>

	<div class="unit-container ml-24 mr-24 mt-10 relative">
		<div class="dy-flex border-b line-height-34 relative font-12 color-999 text-center">
			<div class="dy-fx-1">楼层({{buildingFloorUnitList.length}})</div>
			<div class="dy-fx-1">面积(m²)</div>
			<div class="dy-fx-7 text-left">单元({{unitTotal}}单元)</div>
			<div class="dy-fx-1">操作</div>
		</div>

		<div class="color-unit-box dy-flex font-12">
			<div class="unit-color" v-for="item in unitColors"><span :class="item.class+' '+item.icon"></span>
				{{ item.name }}
			</div>
		</div>

		<div>
			<div class="dy-flex ptb-10 line-height-34 relative font-12 text-center"
				v-for="(item, index) in buildingFloorUnitList">
				<div class="dy-fx-1 color-999 ellipsis-1">{{ item.floorName }}</div>
				<div class="dy-fx-1">
					<p class="color-666 mt-5" style="line-height: 18px;">{{ item.acreage | toFixed2 }}</p>
					<p class="color-999" style="line-height: 18px;">{{ item.unitsLen }}单元</p>
				</div>

				<div class="dy-fx-7 dy-flex" style="flex-wrap: wrap;">
					<!-- 单元 -->
					<div class="relative unit-block" @click="wpStation(item, item0)"
						v-for="(item0, index0) in item.units" :class="{ wp: item0.unitType == 'WP', st: item0.unitType == 'ST', yd: item0.rentState == 'YD', cz: item0.rentState == 'IR',
							kz: item0.rentState == 'VA', ly: item0.rentState == 'IP', dq: item0.rentState == 'DU',fn: item0.rentState == 'FN',zy: item0.rentType == 'ZY',
							cursor: (item0.unitType == 'WP' || item0.unitType == 'ST') , splitUnitBlock: item0.childUnits }">
						<!-- 未分割单元 -->
						<div class="unit-block-item text-left" v-if=" !item0.childUnits ">
							<div style="line-height: 18px;">
								<p class="pl-12">{{ item0.unitName }} - {{ item0.acreage | toFixed2 }}m²</p>
								<p class="pl-12">{{ item0.businessTypeVal }}</p>
							</div>

							<div class="icon-Gm-parking absolute parking-icon" v-if="item0.unitType == 'ST'"></div>
							<div class="icon-Gm-station absolute parking-icon" v-if="item0.unitType == 'WP'"></div>
							<div class="rent-sale-state" v-if="item0.saleStateVal">{{item0.saleStateVal}}</div>
						</div>

						<!-- 分割单元 -->
						<div class="split-unit-block-item" v-if=" item0.childUnits && item0.childUnits.length !== 0 ">
							<div>
								<p>{{ item0.unitName }} - {{ item0.acreage | toFixed2 }}m² - {{ item0.businessTypeVal }}
								</p>
							</div>
							<div class="child-unit-wrap">
								<div class="child-unit-item" v-for="(item1,index1) in item0.childUnits">
									<div class="intro">{{item1.unitName}} - {{item1.acreage | toFixed2}}m² -
										{{item1.businessTypeVal}}
									</div>
									<div class="name">{{item1.unitName}}</div>
									<span class="rent-state" :class="{ 'yd':item1.rentState == 'YD' }"
										v-if="item1.rentState == 'YD'">预定</span>
									<span class="rent-state" :class="{ 'cz':item1.rentState == 'IR' }"
										v-if="item1.rentState == 'IR'">已出租</span>
									<span class="rent-state" :class="{ 'kz':item1.rentState == 'VA' }"
										v-if="item1.rentState == 'VA'">空置</span>
									<span class="rent-state" :class="{ 'ly':item1.rentState == 'IP' }"
										v-if="item1.rentState == 'IP'">即将履约</span>
									<span class="rent-state" :class="{ 'dq':item1.rentState == 'DU' }"
										v-if="item1.rentState == 'DU'">即将到期</span>
									<span class="rent-state" :class="{ 'fn':item1.rentState == 'FN' }"
										v-if="item1.rentState == 'FN'">已到期</span>
									<span class="rent-state" :class="{ 'zy':item1.rentState == 'ZY' }"
										v-if="item1.rentState == 'ZY'">自用</span>
								</div>
							</div>

							<div class="icon-Gm-parking absolute parking-icon" v-if="item0.unitType == 'ST'"></div>
							<div class="icon-Gm-station absolute parking-icon" v-if="item0.unitType == 'WP'"></div>
							<div class="rent-sale-state" v-if="item0.saleStateVal">{{item0.saleStateVal}}</div>
						</div>

					</div>
				</div>

				<div class="dy-fx-1">
					<a href="javascript:;" @click="editFloorUnit(item)">编辑</a>
				</div>
			</div>
		</div>

		<hl-button type="primary" @on-click="submitProjectConfig" class="mb-10">提交项目配置</hl-button>
	</div>



	<!-- 工位配置弹窗 -->
	<div class="unit-pop-wrap" v-if="wpFlag">
		<div class="unit-pop br-4">
			<div class="title">工位配置</div>
			<div class="close icon-Gm-close text-center font-14" @click="closeWp"></div>
			<div class="unit-pop-container bg-f7f7f7 ptb-10 pl-24 pr-24">

				<div class="dy-flex line-height-34">
					<div class="dy-fx-1"><span class="required">*</span>选择楼层:</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 120px;">
							<span class="select-name br-4 cursor" ref="stwpFloors">请选择</span>
							<ul>
								<li v-for="(item, index) in wpFloorList" @click="selectWpFloor(item)">
									{{ item.floorName }}</li>
							</ul>
						</div>
					</div>
					<div class="dy-fx-1"><span class="required">*</span>单元:</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 120px;">
							<span class="select-name br-4 cursor" ref="stwpUnits">请选择</span>
							<ul>
								<li v-for="(item, index) in wpList" @click="selectUnit(item, index)">{{ item.unitName }}
								</li>
							</ul>
						</div>
					</div>
					<div class="dy-fx-3"></div>
				</div>

				<div class="generate font-wt pt-15">生成工位</div>

				<div class="dy-flex pt-10">
					<div class="line-height-34 cursor mr-10" @click="wpCheckall" v-if="showCheck">
						<span
							:class="{'checkall-build': !wpcheckallFlag, 'icon-Gm-confirm': wpcheckallFlag, 'color-primary': wpcheckallFlag}"></span>
						<span>全选</span>
					</div>
					<div class="mr-10">
						<span class="required">*</span>
						<span>序号:</span>
						<input type="text" v-model="sort" class="form-control inline" style="width: 120px;">
					</div>
					<div class="mr-10">
						<span class="required">*</span>
						<span>递增数:</span>
						<input type="number" v-model="increaseNum" class="form-control inline" style="width: 120px;">
					</div>
					<div>
						<hl-button @on-click="addMoreWp">生成</hl-button>
					</div>
				</div>

				<!-- 编辑展示部分 -->
				<div class="clearfix">
					<div class="dy-flex mt-10 pull-left mr-5" v-for="(item, index) in wps" style="align-items: center;">
						<div class="mr-10" @click="checkWp(index)" v-if="showCheck">
							<span
								:class="{'checkall-build': wpNames.indexOf(item.positionName) == -1, 'icon-Gm-confirm': wpNames.indexOf(item.positionName) > -1, 'color-primary': wpNames.indexOf(item.positionName) > -1}"></span>
						</div>
						<div class="mr-10">
							<span class="required">*</span>
							<input type="text" class="form-control inline" style="width: 100px;" placeholder="单元名"
								v-model="item.positionName" />
						</div>
						<div class="mr-10 cursor" @click="editMyself(index,item)">
							<span
								:class="{'checkall-build': item.rentType == 'RE', 'icon-Gm-confirm': item.rentType == 'ZY', 'color-primary': item.rentType == 'ZY' ,'disabledClick':item.isDisabled=='Y'}"></span>
							<span>自用</span>
						</div>
					</div>
				</div>
				<!-- 新增楼宇 -->
				<div>
					<div class="dy-flex mt-10" v-for="(item, index) in addWps" style="align-items: center;">
						<div class="mr-10">
							<span class="required">*</span>
							<input type="text" class="form-control inline" style="width: 125px;" placeholder="单元名"
								@blur="validateUnit(index)" v-model="item.positionName" />
						</div>
						<div class="mr-10 cursor" @click="addMyself(index,item)">
							<span
								:class="{'checkall-build': item.rentType == 'RE', 'icon-Gm-confirm': item.rentType == 'ZY', 'color-primary': item.rentType == 'ZY','disabledClick':item.isDisabled=='Y'}"></span>
							<span>自用</span>
						</div>
						<div>
							<span class="icon-Gm-cancel cursor" @click="addDelWp(index)"></span>
							<span class="icon-Gm-confirm cursor" @click="addWpQuery(index)"></span>
						</div>
					</div>
				</div>

				<div class="mt-10">
					<hl-button @on-click="addWp">添加工位</hl-button>
					<hl-button @on-click="showDelButton" v-if="wps.length && !showCheck">删除工位</hl-button>
					<hl-button @on-click="delWps" v-if="showCheck">确认删除</hl-button>
					<hl-button @on-click="showDelButton" v-if="showCheck">取消</hl-button>
				</div>

				<div class="mt-10 border-t pt-15 dy-flex">
					<p class="mr-24">本单元工位数:{{wps.length}}个</p>
					<p class="mr-24">本楼层工位数:{{ floorWPCount }}个</p>
					<p>本楼宇工位数:{{ buildingWPCount }}个</p>
				</div>

			</div>
			<div class="text-center ptb-10">
				<hl-button @on-click="queryWp" type="primary">确认添加</hl-button>
				<hl-button @on-click="upUnits" type="outline">上一单元</hl-button>
				<hl-button @on-click="downUnits" type="outline">下一单元</hl-button>
			</div>
		</div>
	</div>

	<!-- 单元配置弹窗 -->
	<div class="unit-pop-wrap" v-if="unitFloorFlag">
		<div class="unit-pop br-4">
			<div class="title">按单元配置</div>
			<div class="close icon-Gm-close text-center font-14" @click="closeUnitConfig"></div>
			<div class="unit-pop-container bg-f7f7f7 ptb-10">

				<div class="dy-flex line-height-34 pl-36 pr-24">
					<div class="dy-fx-1"><span class="required">*</span>选择楼层:</div>
					<div class="dy-fx-9">
						<div class="select-ul" style="width: 120px;">
							<span class="select-name br-4 cursor" ref="buildingFloor">请选择</span>
							<ul>
								<li v-for="(item, index) in buildingFloorsList" @click="selectFloors(item, index)">
									{{ item.floorName }}
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="generate font-wt pt-15 pl-36 pr-24">生成单元/车位</div>
				<!-- 生成单元 -->
				<div class="dy-flex pt-10 line-height-34 pl-36 pr-24">
					<!-- <div class="cursor mr-10" @click="deleteAllUnit" v-if="showCheck">
						<span
							:class="{'checkall-build': !deleteAllUnitFlag, 'icon-Gm-confirm': deleteAllUnitFlag, 'color-primary': deleteAllUnitFlag}"></span>
						<span>全选</span>
					</div> -->
					<div class="mr-12">
						<span class="required">*</span>
						<span>业态:</span>
						<hl-select :width="120" type="primary" :data="businessTypeData" v-model="selectedBusinessType"
							@on-change="selectBusinessType"></hl-select>
					</div>
					<div class="mr-12">
						<span class="required">*</span>
						<span>序号:</span>
						<input type="text" v-model="sort" class="form-control inline" style="width: 120px;">
					</div>
					<div class="mr-12">
						<span class="required">*</span>
						<span>递增数:</span>
						<input type="number" v-model="increaseNum" class="form-control inline" style="width: 120px;">
					</div>
					<div class="mr-12" style="margin-top: -2px;">
						<hl-button @on-click="addMoreUnit">生成</hl-button>
					</div>
				</div>
				<div class="linebottom"></div>
				<!-- 编辑展示部分 -->
				<div class="pl-36 pr-24">
					<div class="dy-flex line-height-20 mt-10">
						<div class="cursor mr-10 " @click="deleteAllUnit" v-if="showCheck">
							<span
								:class="{'checkall-build': !deleteAllUnitFlag, 'icon-Gm-confirm': deleteAllUnitFlag, 'color-primary': deleteAllUnitFlag}"></span>
							<span style="display: inline-block;width: 10px;"></span>
						</div>
						<div style="width: 145px;">
							<span class="required">*</span>
							<span>业态:</span>
						</div>

						<div style="width: 140px;">
							<span class="required">*</span>
							<span>单元号:</span>
						</div>

						<div style="width: 170px;">
							<span class="required">*</span>
							<span>可租面积:</span>
							<el-tooltip content="可租合同: 合同签约默认面积" effect='light' >
								<img src="../../../assets//images/wenhao.png" alt="" class="tupian3">
							</el-tooltip>
						</div>

						<div style="width: 150px;">
							<span class="required">*</span>
							<span>类型:</span>
						</div>
						<div class="dy-fx-3"></div>
					</div>
					<div class="mt-10" v-for="(item, index) in editUnit.units" style="align-items: center;">
						<!-- 单元信息 -->
						<div class="dy-flex line-height-34 mtchild">
							<div class="mr-20 cursor" @click="selectSplitUnit(index)" v-if="isShowSplitUnitRadio">
								<span
									:class="{'radio-build': item.isSelectedSplit == 'N', 'icon-Nav-contract-choice': item.isSelectedSplit == 'Y', 'color-primary': item.isSelectedSplit == 'Y'}"></span>
							</div>
							<div class="mr-20 cursor" @click="deleteUnit(index)" v-if="showCheck">
								<span
									:class="{'checkall-build': item.isDeletedUnit == 'N' && item.splitFlag == 'N', 'icon-Gm-confirm': item.isDeletedUnit == 'Y' && item.splitFlag == 'N' , 'color-primary': item.isDeletedUnit == 'Y' && item.splitFlag == 'N' }"></span>
							</div>
							<div class="mr-20">
								<hl-select :width="120" type="primary" :data="businessTypeData"
									v-model="item.businessType" @on-change="selectEditBusinessType(index,$event)">
								</hl-select>
							</div>
							<div class="mr-20">
								<input type="text" class="form-control inline" style="width: 125px;" placeholder="单元名"
									v-model="item.unitName" />
							</div>
							<div class="mr-20">
								<input type="number" class="form-control inline" style="width: 125px;" placeholder="面积"
									v-model="item.acreage" />
								<span>m²</span>
							</div>
							<div class="mr-20">
								<hl-select :width="120" type="primary" :data="unitTypeData" v-model="item.unitType"
									@on-change="selectEditUnitType(index,$event)"></hl-select>
							</div>
							<div class="mr-20 cursor" @click="myselfIsedit(index,item)" v-if="item.unitType == 'BU'">
								<span
									:class="{'checkall-build': item.myself == 'N', 'icon-Gm-confirm': item.myself == 'Y', 'color-primary': item.myself == 'Y', 'disabledClick':item.isDisabled=='Y'}" ></span>
								<span>自用</span>
							</div>
						</div>

						<!-- 分割单元信息 -->
						<div class="split-unit-container pl-12 pr-24" v-if="item.childUnits.length">
							<div class="dy-flex mb-10 line-height-34" v-for="(item1, index1) in item.childUnits">
								<div class="mr-10" @click="deleteSplitUnit(index,index1)" v-if="showCheck">
									<span
										:class="{'checkall-build': item1.isDeletedSplitUnit == 'N' , 'icon-Gm-confirm': item1.isDeletedSplitUnit == 'Y' , 'color-primary': item1.isDeletedSplitUnit == 'Y' }"></span>
								</div>
								<div class="mr-20">
									<hl-select :width="120" type="primary" :data="businessTypeData"
										v-model="item1.businessType"
										@on-change="selectEditSplitUnitBusinessType(index,index1,$event)"></hl-select>
								</div>
								<div class="mr-20">
									<input type="text" class="form-control inline" style="width: 125px;"
										placeholder="单元名" v-model="item1.unitName" />
								</div>
								<div class="mr-20">
									<input type="number" class="form-control inline" style="width: 125px;"
										placeholder="面积" v-model="item1.acreage" />
									<span>m²</span>
								</div>
								<div class="mr-20">
									<span></span>
									<hl-select :width="120" type="primary" :data="unitTypeData" v-model="item1.unitType"
										@on-change="selectEditSplitUnitType(index,index1,$event)"></hl-select>
								</div>
								<div class="mr-20 cursor" @click="changeSplitUnitToMyself(index,index1,item1)"
									v-if="item1.unitType == 'BU'">
									<span
										:class="{'checkall-build': item1.myself == 'N', 'icon-Gm-confirm': item1.myself == 'Y', 'color-primary': item1.myself == 'Y','disabledClick':item1.isDisabled=='Y'}"></span>
									<span>自用</span>
								</div>
							</div>
						</div>

					</div>
				</div>

				<!-- 新增楼宇 -->
				<div>
					<div class="dy-flex mt-10 pl-36 pr-24" v-for="(item, index) in addUnits" style="align-items: center;">
						<div class="mr-10">
							<hl-select :width="120" type="primary" :data="businessTypeData"
								@on-change="selectAddBusinessType(index,$event)"></hl-select>
						</div>
						<div class="mr-10">
							<input type="text" class="form-control inline" style="width: 125px;" placeholder="单元名"
								@blur="validateUnit(index)" v-model="item.unitName" />
						</div>
						<div class="mr-10">
							<input type="number" class="form-control inline" style="width: 125px;" placeholder="面积"
								v-model="item.acreage" />
							<span>m²</span>
						</div>
						<div class="mr-10">
							<span></span>
							<hl-select :width="120" type="primary" :data="unitTypeData"
								@on-change="selectAddUnitType(index,$event)">
							</hl-select>
						</div>
						<div class="mr-10 cursor" @click="myselfIs(index)" v-if="item.unitType == 'BU'">
							<span
								:class="{'checkall-build': item.myself == 'N', 'icon-Gm-confirm': item.myself == 'Y', 'color-primary': item.myself == 'Y'}"></span>
							<span>自用</span>
						</div>
						<div class="line-height-34">
							<span class="icon-Gm-cancel cursor" @click="delUnit(index)"></span>
							<span class="icon-Gm-confirm cursor" @click="saveUnit(index)"></span>
						</div>
					</div>
				</div>

				<!-- 新增分割单元 -->
				<div class="add-split-unit-container pl-36 pr-24" v-if="addSplitUnit.length">
					<div class="dy-flex mb-10" v-for="(item, index) in addSplitUnit">
						<div class="mr-10">
							<hl-select :width="120" type="primary" :data="businessTypeData" v-model="item.businessType"
								@on-change="selectAddSplitBusinessType(index,$event)"></hl-select>
						</div>
						<div class="mr-10">
							<input type="text" class="form-control inline" style="width: 125px;" placeholder="单元名"
								v-model="item.unitName" />
						</div>
						<div class="mr-10">
							<input type="number" class="form-control inline"
								:class=" { 'error-style': item.isError == 'Y' }" style="width: 125px;" placeholder="面积"
								v-model="item.acreage" />
							<span>m²</span>
						</div>
						<div class="mr-10">
							<span>类型:</span>
							<hl-select :width="120" type="primary" :data="unitTypeData" v-model="item.unitType"
								@on-change="selectAddSplitUnitType(index,$event)"></hl-select>
						</div>
						<div class="mr-10 cursor line-height-34" @click="addSplitIsMyself(index)"
							v-if=" item.unitType == 'BU' ">
							<span
								:class="{'checkall-build': item.myself == 'N', 'icon-Gm-confirm': item.myself == 'Y', 'color-primary': item.myself == 'Y'}"></span>
							<span>自用</span>
						</div>
						<div class="line-height-34">
							<span class="icon-Gm-cancel cursor" @click="delAddSplitUnit(index)"></span>
							<span class="icon-Gm-confirm cursor" @click="saveAddSplitUnit(index)"></span>
						</div>
					</div>
				</div>

				<!-- 分割单元按钮 -->
				<div style="marginLeft:34px;marginTop:10px" class="pl-36 pr-24" v-if="isShowSplitUnit">
					<input type="number" class="form-control inline" style="width: 200px;margin-right:10px;"
						placeholder="请输入分割数量(至多5个)" v-model.number="splitUnitNum" />
					<hl-button @on-click="confirmSplitUnit">确认分割</hl-button>
					<hl-button @on-click="cancelSplitUnit">取消</hl-button>
				</div>

				<div class="mt-10 pl-36 pr-24">
					<hl-button @on-click="addUnitsDtph" v-if="isShowAddUnitBtn">添加单元</hl-button>
					<hl-button @on-click="showDelButton" v-if="isShowDeleteUnitBtn">删除单元</hl-button>
					<hl-button @on-click="splitUnit" v-if="isShowSplitUnitBtn && quanxian.indexOf('c331') > -1">分割单元
					</hl-button>
					<hl-button @on-click="delMoreUnits" v-if="showCheck">确认删除</hl-button>
					<hl-button @on-click="showDelButton" v-if="showCheck">取消</hl-button>
				</div>

				<div class="mt-10 border-t pt-15 pl-36 pr-24">
					<p>本楼层平米数: {{ floorArceage | toFixed2 }} m²</p>
					<p>本楼宇平米数: {{ ( editUnit.buildingAcreage - initArceage + floorArceage ) | toFixed2 }} m²</p>
				</div>

			</div>
			<div class="text-center ptb-10">
				<hl-button @on-click="queryAddUnit" type="primary">确认添加</hl-button>
				<hl-button @on-click="upFloors" type="outline">上一楼层</hl-button>
				<hl-button @on-click="downFloors" type="outline">下一楼层</hl-button>
			</div>
		</div>
	</div>

	<!-- 车位配置弹窗 -->
	<div class="unit-pop-wrap" v-if="stFlag">
		<div class="unit-pop br-4">
			<div class="title">{{positionType == 'WP' ? '工' : '车'}}位配置</div>
			<div class="close icon-Gm-close text-center font-14" @click="closeWp"></div>
			<div class="unit-pop-container bg-f7f7f7 ptb-10 pl-24 pr-24">

				<div class="dy-flex line-height-34">
					<div class="dy-fx-1"><span class="required">*</span>选择楼层:</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 120px;">
							<span class="select-name br-4 cursor" ref="stwpFloors">请选择</span>
							<ul>
								<li v-for="(item, index) in wpFloorList" @click="selectWpFloor(item)">
									{{ item.floorName }}</li>
							</ul>
						</div>
					</div>
					<div class="dy-fx-1"><span class="required">*</span>单元:</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 120px;">
							<span class="select-name br-4 cursor" ref="stwpUnits">请选择</span>
							<ul>
								<li v-for="(item, index) in wpList" @click="selectUnit(item, index)">{{ item.unitName }}
								</li>
							</ul>
						</div>
					</div>
					<div class="dy-fx-3"></div>
				</div>

				<div class="generate font-wt pt-15">生成{{positionType == 'WP' ? '工' : '车'}}位</div>

				<div class="dy-flex pt-10">
					<div class="line-height-34 cursor mr-10" @click="wpCheckall" v-if="showCheck">
						<span
							:class="{'checkall-build': !wpcheckallFlag, 'icon-Gm-confirm': wpcheckallFlag, 'color-primary': wpcheckallFlag}"></span>
						<span>全选</span>
					</div>
					<div class="mr-10">
						<span class="required">*</span>
						<span>序号:</span>
						<input type="text" v-model="sort" class="form-control inline" style="width: 120px;">
					</div>
					<div class="mr-10">
						<span class="required">*</span>
						<span>递增数:</span>
						<input type="number" v-model="increaseNum" class="form-control inline" style="width: 120px;">
					</div>
					<div>
						<hl-button @on-click="addMoreWp">生成</hl-button>
					</div>
				</div>
				<!-- //编辑展示部分 -->
				<div class="clearfix">
					<div class="dy-flex mt-10 pull-left mr-5" v-for="(item, index) in wps" style="align-items: center;">
						<div class="mr-10" @click="checkWp(index)" v-if="showCheck">
							<span
								:class="{'checkall-build': wpNames.indexOf(item.positionName) == -1, 'icon-Gm-confirm': wpNames.indexOf(item.positionName) > -1, 'color-primary': wpNames.indexOf(item.positionName) > -1}"></span>
						</div>
						<div class="mr-10">
							<span class="required">*</span>
							<input type="text" class="form-control inline" style="width: 100px;" placeholder="单元名"
								v-model="item.positionName" />
						</div>
						<div class="mr-10 cursor" @click="editMyself(index,item)">
							<span
								:class="{'checkall-build': item.rentType == 'RE', 'icon-Gm-confirm': item.rentType == 'ZY', 'color-primary': item.rentType == 'ZY','disabledClick':item.isDisabled=='Y'}"></span>
							<span>自用</span>
						</div>
					</div>
				</div>
				<!-- //新增楼宇 -->
				<div>
					<div class="dy-flex mt-10" v-for="(item, index) in addWps" style="align-items: center;">
						<div class="mr-10">
							<span class="required">*</span>
							<input type="text" class="form-control inline" style="width: 125px;" placeholder="单元名"
								@blur="validateUnit(index)" v-model="item.positionName" />
						</div>
						<div class="mr-10 cursor" @click="addMyself(index,item)">
							<span
								:class="{'checkall-build': item.rentType == 'RE', 'icon-Gm-confirm': item.rentType == 'ZY', 'color-primary': item.rentType == 'ZY','disabledClick':item.isDisabled=='Y'}"></span>
							<span>自用</span>
						</div>
						<div>
							<span class="icon-Gm-cancel cursor" @click="addDelWp(index)"></span>
							<span class="icon-Gm-confirm cursor" @click="addWpQuery(index)"></span>
						</div>
					</div>
				</div>

				<div class="mt-10">
					<hl-button @on-click="addWp">添加{{positionType == 'WP' ? '工' : '车'}}位</hl-button>
					<hl-button @on-click="showDelButton" v-if="wps.length && !showCheck">
						删除{{positionType == 'WP' ? '工' : '车'}}位
					</hl-button>
					<hl-button @on-click="delWps" v-if="showCheck">确认删除</hl-button>
					<hl-button @on-click="delWps" v-if="showCheck">取消</hl-button>
				</div>

				<div class="mt-10 border-t pt-15 dy-flex">
					<p class="mr-24">本单元{{positionType == 'WP' ? '工' : '车'}}位数:{{wps.length}}个</p>
					<p class="mr-24">本楼层{{positionType == 'WP' ? '工' : '车'}}位数:{{ floorWPCount }}个</p>
					<p>本楼宇{{positionType == 'WP' ? '工' : '车'}}位数:{{ buildingWPCount }}个</p>
				</div>
			</div>
			<div class="text-center ptb-10">
				<hl-button @on-click="queryWp" type="primary">确认添加</hl-button>
				<hl-button @on-click="upUnits" type="outline">上一单元</hl-button>
				<hl-button @on-click="downUnits" type="outline">下一单元</hl-button>
			</div>
		</div>
	</div>

	<!-- 车位详情 -->
	<div class="stwp-park-wrap" v-if="stInfoFlag">
		<div class="stwp-park br-4 relative">
			<div class="title">{{positionType == 'WP' ? '工' : '车'}}位详情</div>
			<div class="close icon-Gm-close text-center font-12" @click="stwpClose"></div>
			<div class="container-park bg-f7f7f7 clearfix pl-24 pr-24 ptb-10" style="flex-wrap: wrap;">
				<img src="assets/images/unit-config.png" alt="暂无车位，请到车位配置编辑车位" v-if="!wps.length"
					style="margin-top: 20px;margin-left: 150px;">
				<p v-if="!wps.length" class="text-center color-666 pt-10">
					暂无{{positionType == 'WP' ? '工' : '车'}}位，请到{{positionType == 'WP' ? '工' : '车'}}位配置编辑{{positionType == 'WP' ? '工' : '车'}}位
				</p>
				<div class="stwp-block text-center" v-for="(item, index) in wps" v-if="wps.length">
					<p class="font-18"
						:class="{'icon-Gm-parking-display': item.positionType == 'ST','icon-Gm-station-display': item.positionType == 'WP',va: item.rentState == 'VA', ir: item.rentState == 'IR', dq: item.rentState == 'DU', zy0: item.rentState == 'ZY'}">
					</p>
					<p class="color-999 font-12 pt-8">{{ item.positionName }}</p>
				</div>
			</div>
			<div class="dy-flex bg-f7f7f7 border-t line-height-40 pl-24 pr-24" style="justify-content: space-between;">
				<div class="color-666">本单元{{positionType == 'WP' ? '工' : '车'}}位数：<span
						style="color: #648ae2;">{{wps.length}}</span>个</div>
				<div class="color-666">本楼层{{positionType == 'WP' ? '工' : '车'}}位数：<span
						style="color: #648ae2;">{{ positionType == 'WP' ? floorWPCount : floorSTCount }}</span>个</div>
				<div class="color-666">本楼宇{{positionType == 'WP' ? '工' : '车'}}位数：<span
						style="color: #648ae2;">{{ positionType == 'WP' ? buildingWPCount : buildingSTCount }}</span>个
				</div>
			</div>
			<div class="ptb-10 text-center">
				<hl-button @on-click="editStWpKoil" type="primary">编辑</hl-button>
			</div>
		</div>
	</div>
</section>

<script src="modules/projectConfig/scripts/unit.js" charset="utf-8"></script>
